<template>
    <div class="room">
        <img :src="roomPic" alt="">
        <div>
            <span>{{roomType}}</span>
            <span>单价：<b>{{roomPrice}}</b>元</span>
        </div>
        <div>
            <span>售出：<b>{{isUsed}}</b></span>
            <el-button @click="buy" type="primary" size="small" :disabled='isUsed=="是"' round>购买</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            roomPic:{
                type:String,
                required:true,
            },
            roomType:{
                type:String,
                required:true,
            },
            roomPrice:{
                type:Number,
                required:true,
            },
            isUsed:{
                type:String,
                required:true,
            }
        },
        methods:{
            buy(){
                this.$emit('purchase')
            }
        }
        
    }
</script>

<style lang="scss" scoped>
    .room{
        display: flex;
        flex-direction: column;
        color: #409eff;
        border-radius: 10px;
        overflow: hidden;
        width: 200px;
        border: 1px solid #409eff;
        margin: 10px 20px;
        font-weight: bold;
        >img{
            width: 100%;
            height: 150px;
        }
        >div:nth-child(2){
            display: flex;
            padding: 5px 15px;
            justify-content: space-between;
            >span:nth-child(1){
              
            }
            >span:nth-child(2){
                >b{
                    color: red;
                }
            }
        }
        >div:nth-child(3){
            display: flex;
            padding: 5px 15px;
            justify-content: space-between;
            align-items: center;
            >span:nth-child(1){
                >b{
                    color: green;
                }
            }
        }
    }
</style>